<template>
	<el-drawer
		class="drawer"
		v-model="isShow"
		direction="btt"
		:show-close="false"
		:size="height"
		header-class="mobile-template-header"
		body-class="mobile-template-body"
		footer-class="mobile-template-footer"
		:resizable="true"
		:style="{
			padding: '26px 30px',
			borderTopRightRadius: '10px',
			borderTopLeftRadius: '10px',
		}"
	>
		<template #default>
			<slot name="default"></slot>
		</template>
		<template #footer>
			<div class="gray"></div>
			<div class="btn" @click="handleSure">确定</div>
		</template>
	</el-drawer>
</template>

<script setup>
	const model = defineModel();
	const isShow = ref(model);
	const emits = defineEmits(['update:sure']);
	defineProps({
		height: {
			type: String,
			default: '750px',
		},
	});
	function handleSure() {
		emits('update:sure');
	}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
	.drawer,
	.mobile-template-header,
	.mobile-template-body,
	.mobile-template-footer {
		padding: 0 !important;
	}
	.mobile-template-header,
	.mobile-template-body,
	.mobile-template-footer {
		padding: 0 20px;
	}
	.drawer {
		padding: 45px 0 40px !important;
	}
	.mobile-template-header {
		margin: 0 !important;
		padding: 0 20px !important;
		width: 0;
		height: 0;
		display: none;
	}
	.mobile-template-body {
		padding: 0 20px !important;
	}
	.mobile-template-footer {
		@include flex(column);
		.gray {
			width: 100%;
			height: 20px;
			margin-bottom: 20px;
			background-color: #eeeeee;
		}
		.btn {
			// width: 690px;
			@include mobileVwCalc(690px);
			height: 70px;
			background-color: #022559;
			border-radius: 8px;
			@include font(_, 28px, 36px, 500, white);
			@include flex();
		}
	}
</style>
